<script setup lang="ts">
import { getUser } from "@/api/search";
import { Check, Close } from "@element-plus/icons-vue";
interface Props {
  renameId: any;
}
const props = withDefaults(defineProps<Props>(), {
  renameId: "",
});
const multipleSelection = ref([]);
const multipleTableRef = ref(null);
const lastRow: any = ref();
const rowClick = (row: any, column: any, event: any) => {
  // console.log(row, lastRow.value);
  multipleTableRef.value.toggleRowSelection(row);
  if (multipleSelection.value.length > 1) {
    multipleSelection.value.forEach((item) => {
      multipleTableRef.value.toggleRowSelection(item, false);
    });
    multipleTableRef.value.toggleRowSelection(row);
  }
};
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const scrollTableDom: any = ref("");
onMounted(() => {
  getLogData();
});
onUnmounted(() => {});

const svg = `<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" fill="#409eff" stroke-width="4px">
    <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
        <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="-360 67 67"
            dur="16s"
            repeatCount="indefinite"/>
    </path>
</svg>`;
const distributePermissionVisible = ref(false);
const cur_obj = ref();
const preview_file = (row: any) => {
  distributePermissionVisible.value = true;
  cur_obj.value = row;
};
const getClickData = () => {
  return [...multipleSelection.value];
};
defineExpose({ getClickData });
const tableData = ref();
const loading = ref();
const updata_val = ref(0);
const getLogData = async () => {
  loading.value = true;
  let res: any = await getUser({
    pageSize: 999,
    pageNum: 1,
  });
  if (res.code == 0) {
    tableData.value = res.data.records;
    loading.value = false;
    updata_val.value++;
  }
};
const buttons = [
  { type: "primary", text: "编辑" },
  // { type: "danger", text: "删除" },
];
const show = ref(false);
const userid = ref("");
const edit_close = () => {
  show.value = false;
  getLogData();
};
const btnClick = (str, row) => {
  if (str == "编辑") {
    userid.value = row.id;
    show.value = true;
    console.log(userid.value);
  }
};
const getImg = (url) => {
  return import.meta.env.VITE_APP_API_URL + url;
};
</script>

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    @selection-change="handleSelectionChange"
    class="table"
    :highlight-current-row="false"
    @row-click="rowClick"
    v-loading="loading"
    :element-loading-svg="svg"
    element-loading-svg-view-box="0, 0, 135, 135"
  >
    <!-- <el-table-column type="selection" /> -->

    <el-table-column property="username" label="账号" />
    <el-table-column property="createtime" label="时间" />
    <el-table-column label="权限">
      <template #default="scope">
        <span v-if="scope.row.permissions == 0">管理员</span>
        <span v-if="scope.row.permissions == 1">普通用户</span>
      </template>
    </el-table-column>
    <el-table-column property="nickname" label="昵称" />
    <el-table-column property="nickname" label="头像">
      <template #default="scope">
        <img
          :key="updata_val"
          :src="getImg(scope.row.avatar)+'?'+ Math.random()"
          style="width: 120px; height: 120px"
        />
      </template>
    </el-table-column>
    <el-table-column property="nickname" label="操作">
      <template #default="scope">
        <el-button
          v-for="button in buttons"
          :key="button.text"
          :type="button.type"
          text
          @click="btnClick(button.text, scope.row)"
        >
          {{ button.text }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <UserEdit :isTable="true" :show="show" :id="userid" @close="edit_close" />
</template>

<style lang="scss" scoped>
.table {
  width: 100%;
  height: 100%;

  --el-table-current-row-bg-color: var(--el-color-primary-light-9) !important;

  :deep(.el-table .cell) {
    padding: 0 !important;
  }
}
.control {
  display: none;
}
.fileScope {
  display: flex;
  align-items: center;
  .fileScope-name {
    display: flex;
    align-items: center;
    .el-image {
      width: px2rem(32px);
      height: px2rem(32px);
      margin-right: px2rem(12px);
    }
    .edit-name {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
.flie-name {
}
</style>
